<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="22" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="22" color="#333333"></uni-icons>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @tap="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-bar-title">联系客服</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y class="content-scroll">
      <!-- 常见问题 -->
      <view class="section">
        <view class="section-title">常见问题</view>
        <view class="faq-list">
          <view class="faq-item" v-for="(item, index) in faqList" :key="index" @tap="viewFaq(item)">
            <text class="faq-text">{{ item.title }}</text>
            <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 联系我们 -->
      <view class="section">
        <view class="section-title">联系我们</view>
        
        <!-- 客服电话 -->
        <view class="contact-item">
          <view class="contact-icon phone-icon">
            <uni-icons type="phone" size="24" color="#4cd964"></uni-icons>
          </view>
          <view class="contact-info">
            <text class="contact-title">客服电话</text>
            <text class="contact-value">400-888-8888</text>
          </view>
          <button class="action-btn call-btn" @tap="makeCall">拨打</button>
        </view>
        
        <!-- 在线客服 -->
        <view class="contact-item">
          <view class="contact-icon chat-icon">
            <uni-icons type="chat" size="24" color="#4889f1"></uni-icons>
          </view>
          <view class="contact-info">
            <text class="contact-title">在线客服</text>
            <text class="contact-value">9:00-22:00</text>
          </view>
          <button class="action-btn chat-btn" @tap="openChat">咨询</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 常见问题列表
const faqList = ref([
  { id: 1, title: '如何修改订单?', content: '订单提交后15分钟内可以通过订单详情页的"修改订单"按钮进行修改。超过15分钟需要联系客服协助处理。' },
  { id: 2, title: '积分规则说明', content: '每消费1元获得1积分，积分可用于兑换优惠券或参与积分活动。积分有效期为一年。' },
  { id: 3, title: '优惠券使用规则', content: '优惠券有特定的使用条件和有效期，详情请查看优惠券说明。部分优惠券不可与其他优惠同时使用。' }
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 查看常见问题详情
const viewFaq = (item: any) => {
  uni.showModal({
    title: item.title,
    content: item.content,
    showCancel: false,
    confirmText: '我知道了'
  });
};

// 拨打电话
const makeCall = () => {
  uni.makePhoneCall({
    phoneNumber: '4008888888',
    success: () => {
      console.log('拨打电话成功');
    },
    fail: (err) => {
      console.error('拨打电话失败:', err);
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      });
    }
  });
};

// 打开在线客服
const openChat = () => {
  uni.showToast({
    title: '正在连接客服...',
    icon: 'none'
  });
  
  // 这里可以接入实际的客服系统
  setTimeout(() => {
    uni.showToast({
      title: '客服功能开发中',
      icon: 'none'
    });
  }, 1500);
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 101;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: sticky;
  top: 44px;
  z-index: 100;
}

.nav-bar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.nav-bar-right {
  width: 80rpx;
}

.content-scroll {
  flex: 1;
  padding-bottom: 30rpx;
}

.section {
  margin-bottom: 20rpx;
  background-color: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  padding: 30rpx 30rpx 20rpx;
  color: #222;
  position: relative;
  display: flex;
  align-items: center;
}

/* 添加标题装饰线 */
.section-title::before {
  content: '';
  width: 6rpx;
  height: 30rpx;
  background-color: vars.$primary-color;
  border-radius: 3rpx;
  margin-right: 16rpx;
}

.faq-list {
  background-color: #fff;
}

.faq-item {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s;
}

/* 添加点击效果 */
.faq-item:active {
  background-color: #f9f9f9;
}

.faq-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.contact-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.phone-icon {
  background-color: rgba(76, 217, 100, 0.1);
}

.chat-icon {
  background-color: rgba(72, 137, 241, 0.1);
}

.contact-info {
  flex: 1;
}

.contact-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}

.contact-value {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.action-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #fff;
  border-radius: 30rpx;
  margin: 0;
  padding: 0;
  transition: opacity 0.2s;
}

.action-btn:active {
  opacity: 0.8;
}

.call-btn {
  background-color: #4cd964;
  box-shadow: 0 2rpx 8rpx rgba(76, 217, 100, 0.3);
}

.chat-btn {
  background-color: #4889f1;
  box-shadow: 0 2rpx 8rpx rgba(72, 137, 241, 0.3);
}
</style> 